<template>
  <div class="apt-table">
    <h3 class="title2"><span>资质审批结果{{queryParam.colType === "1" ? '公示' : '公告'}}</span></h3>
    <Form :wrapper-col="{ span: 14 }" class="pb15">
      <Row :gutter="[24, 24]">
        <Col :span="8">
          <FormItem label="资质类型" :labelCol="{span:5 }" :wrapperCol="{span:18,offset:1  }">
            <Select v-model:value="queryParam.qualType">
              <Option :value="item.code" v-for="item in aptTypes">{{ item.itemName }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col :span="10">
          <FormItem label="企业名称">
            <Input
                v-model:value="queryParam.corpName"
                placeholder="请输入企业名称"
            />
          </FormItem>
        </Col>
        <Col :span="6" class="text-right">
          <Button type="primary" ghost @click="handleReset">重置</Button>
          <Button type="primary" @click="handleSearch">立即查询</Button>
        </Col>
      </Row>
    </Form>
    <div class="tbr-border">
      <Table
          :dataSource="dataSource"
          :columns="columns"
          :loading="loading"
          :pagination="pagination"
          :rowKey="(dataSource) => dataSource.applyId"
          @change="handleTableChange"
      >
        <template #num="{ index }">
            <span>{{
                (pagination.current - 1) * pagination.pageSize +
                parseInt(index) + 1
              }}</span>
        </template>

        <template #com="{ text , record }">
          <p class="bold mb0">{{text}}</p>
          <p class="mb0 gray6">{{record.corpCreditCode}}</p>
        </template>

        <template #se="{ text , record }">
          <p class="mb0">{{record.apyQualItemName}}</p>
          <p class="mb0 blue">{{text}}</p>
        </template>

        <template #result="{ text }">
          <Tag :color="ColorMapping[parseInt(text)].color">
            {{ColorMapping[parseInt(text)].text}}
          </Tag>
        </template>
        <template #date="{ text }">
          {{ parseTime(parseInt(text)) }}
        </template>

        <template #detail="{ text }">
          <a class="blue" :href="`/notice/${text}`">查看</a>
        </template>
      </Table>
    </div>
  </div>
</template>

<script lang="ts">
import {Button, Col, Form, Input, Row, Select, Table, Tag} from "ant-design-vue";
import {defineComponent, onMounted, reactive, ref} from "vue";
import {onBeforeRouteUpdate} from "vue-router";
import {ColorMapping, comTypes, getAptNoticeList, getAptqualItem} from '/@/api/public';
import {parseTime} from '/@/utils';

interface queryConfig {
  colType: any;
  corpName: string;
  qualType: string;
  current: number;
  size: number;
}

interface pageConfig {
  current: number;
  total: number;
  pageSize: number;
}

export default defineComponent({
  name: "aptNotice",
  components: {
    Row,
    Col,
    Form,
    FormItem: Form.Item,
    Tag,
    Input,
    Button,
    Table,
    Select,
    Option: Select.Option
  },
  setup() {
    const aptTypes = ref(comTypes);
    const dataSource = ref<unknown[]>([])

    const paginationRef = ref<pageConfig>({
      current: 1,
      total: 0,
      pageSize: 10 //每页中显示10条数据
    })



    const loading = ref<boolean>(true);
    let queryParam = reactive<queryConfig>({
      colType: '2',
      corpName: "",
      qualType: "QY_TYPE_SG",
      current: 1,
      size: 10
    })

    const tabChange = () => {
      getTableList();
    }

    const handleTableChange = (data: pageConfig) => {
      paginationRef.value = data;
      queryParam.current = data.current;
      queryParam.size = data.pageSize;
      getTableList();
    }

    const getTableList = async () => {
      loading.value = true;
      let data = await getAptNoticeList(queryParam);
      paginationRef.value.total = data.total;
      paginationRef.value.pageSize = data.size;
      dataSource.value = data.records;
      loading.value = false;
    }

    const getQualItem = async () => {
      loading.value = true;
      aptTypes.value  = await getAptqualItem({  } );
      loading.value = false;
    }

    const handleSearch = async () => {
      paginationRef.value.current =  1;
      queryParam.current = 1;
      await getTableList();
    }

    const handleReset = () => {
      paginationRef.value.current =  1;
      Object.assign(queryParam,{
        corpName: "",
        current:1
      })
      getTableList();
    }


    onBeforeRouteUpdate((to) => {
      queryParam.colType = to.params.type as string;
      getTableList();

      console.log(queryParam.colType);
      //console.log( colType);
    });

    onMounted(() => {
      // getQualItem() // 取消获取菜单配置
      getTableList();
    });

    const columns = [
      {
        title: "序号",
        width:80,
        align:"center",
        slots: { customRender: 'num' }
      },
      {
        title: "企业名称",
        dataIndex: "corpName",
        width: 340,
        slots: { customRender: 'com' }
      },
      {
        title: "申请事项",
        dataIndex: "bitemName",
        width: 320,
        slots: { customRender: 'se' }
      },
      {
        title: "公告日期",
        dataIndex: "pubEdate",
        customRender: ({ text })=> parseTime(text),

      },
      {
        title: "详情",
        dataIndex: "applyId",
        width: 80,
        slots: { customRender: 'detail' }
      }
    ]

    return {
      aptTypes, queryParam, dataSource, columns, loading, pagination: paginationRef, getQualItem ,
      parseTime, tabChange, getTableList, handleSearch, handleReset, handleTableChange , ColorMapping
    };

  },
});
</script>

<style lang="less" scoped>

.apt-table{
  padding: 15px 20px;

  .title2{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #E0E3EA;

    span{
      padding-left: 10px;
      line-height: 1;
      border-left: 4px solid #0078FF;
    }
  }
}

::v-deep(.ant-table){
  .ant-table-body {
    border: 1px solid #f0f0f0;
    border-bottom: none;
  }

  .ant-table-placeholder {
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-left-bar{
    width: 100%;
  }
}

</style>


